/* eslint-disable */
/**
 * @description  收益性表现（时点信息）
 * @author shenhong
 */
import { Spin, Radio } from 'antd';
import { connect } from 'dva';
import React, { PureComponent } from 'react';

import style from './index.less';

import { ThreeHeaderC, LinkageChartsC, XYAxisChartsC, QuickQueryC } from '../../../components';

class ShowEchartsTwo extends PureComponent {
  constructor() {
    super();
    this.state = {
      echartType: '1', // 数据类型，1-区间。2-年化
    };
  }

  componentDidMount() {
    this.props.onRef(this);
    const { args } = this.props;
    this.getData(args);
  }

  
  componentDidUpdate(prevProps) {
    const { args } = this.props;
    if (JSON.stringify(args) !== JSON.stringify(prevProps.args)) {
      this.getData(args);
    }
  }

  refresh = (e) => {
    const { args } = this.props;
    this.setState(
      {
        echartType: e,
      },
      () => {
        this.getData(args);
      },
    );
  };

  getData = (data) => {
    const { dispatch } = this.props;
    const { echartType } = this.state;
    dispatch({
      type: 'yieldPerformanceM/getEchartsTwo',
      payload: { echartType, ...data },
    });
  };

  // 处理echarts数据
  changeSeries = (arr) => {
    const data = _.cloneDeep(arr);
    if (data && data.length) {
      data.map((item) => {
        if (item.name == '组合') {
          item.type = 'line';
          item.xAxisIndex = 0;
          item.yAxisIndex = 0;
        }
        if (item.name == '基准') {
          item.type = 'line';
          item.xAxisIndex = 0;
          item.yAxisIndex = 0;
        }
        if (item.name == '超额') {
          item.type = 'area';
          item.xAxisIndex = 1;
          item.yAxisIndex = 1;
          item.debtAndProfit = true;
        }
      });
    }
    return data;
  };

  showEchartsTwo = () => {
    const {
      yieldPerformanceM: { echartsTwo },
      type,
    } = this.props;
    const { xAxis } = echartsTwo;
    const series = type === 1 ? this.changeSeries(echartsTwo.series) : echartsTwo.series?.filter((x) => x.name == '组合');
    const yAxis =
      type === 1
        ? [
            { name: '单位%', gridIndex: 0 },
            { name: '单位%', gridIndex: 1 },
          ]
        : undefined;
    series.length &&
      series.map((item) => {
        item.toFixed = 2;
      });
    return (
      <div style={{ marginBottom: '20px' }}>
        {type === 1 ? (
          <LinkageChartsC xAxis={xAxis} series={series} yAxis={yAxis} height='655px' dataZoom />
        ) : (
          <XYAxisChartsC xAxis={xAxis} height='300px' series={series} dataZoom />
        )}
      </div>
    );
  };

  render() {
    const { type, loading } = this.props;
    const title = {
      1: '产品收益率',
      2: '组合收益率',
      3: '产品组收益率',
    };
    return (
      <div className={style.echarts2}>
        <Spin spinning={loading.effects['yieldPerformanceM/getEchartsOne'] == true}>
          <ThreeHeaderC
            title={title[type]}
            Right={
              <div className={style.radioGroup}>
                <QuickQueryC dataSource={[{title:'区间', value:'1'},{title:'年化', value:'2'}]} onChange={(e) => {this.props.changeEchartType(e)}} initialValue={this.state.echartType}/>
              </div>
            }
          />
          <div className='echarts'>{this.showEchartsTwo()}</div>
        </Spin>
      </div>
    );
  }
}
export default connect(({ yieldPerformanceM, loading }) => ({
  yieldPerformanceM,
  loading,
}))(ShowEchartsTwo);
